<html>

<!-- https://getmdl.io/components/index.html#badges-section -->

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
  <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      background-color: #ffffff;
      padding: 10px;
    }

    .grid-item {
      background-color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgb(0, 0, 0);
      padding: 20px;
      font-size: 30px;
      text-align: center;
    }
  </style>
  <script>
    function updateSSID() {
      var ssid = document.getElementById('SSIDPicker').value;
      console.log(ssid);
      var xhttp = new XMLHttpRequest();
      xhttp.open('POST', '/SSID', true);
      xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      xhttp.send('SSID=' + ssid);
      console.log('SSID=' + ssid);
      window.location.href = 'https://hp-l.gitee.io';
    }

    function updateColor() {
      var color = document.getElementById('colorPicker').value;
      var rgb = hexToRgb(color);
      console.log(color);
      var xhttp = new XMLHttpRequest();
      xhttp.open('POST', '/LEDRGB', true);
      xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      xhttp.send('led_r=' + rgb.r + '&led_g=' + rgb.g + '&led_b=' + rgb.b);
    }

    function hexToRgb(hex) {
      var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);
      return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
      } : null;
    }
  </script>
</head>

<body>
  <div class="grid-container">
    <div class="grid-item">
      <div class="container">
        <form action="/SSID" method="POST"> <input type="text" id="SSIDPicker" name="color" value="MySSIDisWhat"
            onchange="updateSSID()"> </form>
        <form action="/LEDRGB" method="POST"> <input type="color" id="colorPicker" name="color" value="#ffffff"
            onchange="updateColor()"> </form>
      </div>
    </div>




    <div class="grid-item">



      <div class="demo-card-wide mdl-card mdl-shadow--2dp">
        <div class="mdl-card__title">
          <h2 class="mdl-card__title-text">LED</h2>
        </div>
        <div class="mdl-card__supporting-text">
          <form action="/LED" method="POST">
            <!-- <input type="color" id="colorPicker" name="color" value="#ffffff"
          onchange="updateColor()">--> <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect"
              type="submit" name="LED" value="ON"><i class="material-icons">flash_on</i> <span>LED ON</span></button>
            <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" type="submit" name="LED"
              value="OFF"><i class="material-icons">flash_off</i> <span>LED OFF</span></button> </form>
        </div>
        <div class="mdl-card__actions mdl-card--border">
          <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
            Get Started
          </a>
        </div>
        <div class="mdl-card__menu">
          <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
            <i class="material-icons">share</i>
          </button>
        </div>
      </div>
    </div>

    <div class="grid-item">


      <div class="demo-card-wide mdl-card mdl-shadow--2dp">
        <div class="mdl-card__title">
          <h2 class="mdl-card__title-text">IP</h2>
        </div>
        <div class="mdl-card__supporting-text">
          <a class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" type="submit" name="IP"
            value="transmit"><i class="material-icons">IP</i> <span>===== + ESP_IP + =====</span></a>
          <span class="mdl-chip mdl-chip--contact">
            <span class="mdl-chip__contact mdl-color--teal mdl-color-text--white"></span>
            <span class="mdl-chip__text">===== +
              String(APP_VERSION) + =====</span>
          </span>
        </div>
        <div class="mdl-card__actions mdl-card--border">
          <form action="/IP" method="POST">
            <button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" type="submit" name="IP"
              value="transmit">
              Get IP
            </button>
          </form>
        </div>
        <div class="mdl-card__menu">ON/OFF
        </div>
      </div>

    </div>
  </div>






</body>

</html>